<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Dubbo Web Client</title>

  <link rel="stylesheet" href="node_modules/normalize.css/normalize.css"/>
  <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css"/>
</head>
<body>

<div id="app" class="container">
  <div class="row">
    <div class="col-lg-12">
      <h2 class="page-header">Dubbo Web Client</h2>
    </div>
  </div>

  <div class="row">
    <div class="col-lg-6" >
      <form class="form-horizontal" @submit.prevent>
        <div class="form-group">
          <label for="registry-address" class="col-sm-2 control-label">注册地址</label>
          <div class="col-sm-10">
            <input v-model="registryAddress" class="form-control" id="registry-address"
                   placeholder="zookeeper://127.0.0.1:2181" required>
          </div>
        </div>
        <div class="form-group">
          <label for="registry-group" class="col-sm-2 control-label">注册组</label>
          <div class="col-sm-10">
            <input v-model="registryGroup" class="form-control" id="registry-group"
                   placeholder="yummy" required>
          </div>
        </div>
        <div class="form-group">
          <label for="reference-interface" class="col-sm-2 control-label">接口名</label>
          <div class="col-sm-10">
            <input v-model="referenceInterface" class="form-control" id="reference-interface"
                    required>
          </div>
        </div>
        <div class="form-group">
          <label for="reference-interface" class="col-sm-2 control-label">接口组</label>
          <div class="col-sm-10">
            <input v-model="referenceGroup" class="form-control" id="reference-group"
                    required>
          </div>
        </div>
        <div class="form-group">
          <label for="method-name" class="col-sm-2 control-label">方法名</label>
          <div class="col-sm-10">
            <input v-model="methodName" class="form-control" id="method-name"
                   placeholder="sayHello">
          </div>
        </div>
        <div class="form-group" v-for="param in params">
          <label class="col-sm-2 control-label">参数 {{$index + 1}}</label>
          <div class="col-sm-3">
            <input v-model="param.type" class="form-control" placeholder="java.lang.Object">
          </div>
          <div class="col-sm-6">
            <textarea  v-model="param.value" placeholder="{}" rows="10" cols="50"> {"merNo":"543536"} </textarea>
          </div> 
          <div class="col-sm-1" style="display: none">
            <button @click="removeParam(param)" class="btn btn-default btn-block pull-right"><i
                class="glyphicon glyphicon-minus"></i></button>
          </div>
        </div>
        <div class="form-group"  style="display: none">
          <div class="col-sm-offset-11 col-sm-1">
            <button @click="addParam" class="btn btn-default btn-block"><i
                class="glyphicon glyphicon-plus"></i></button>
          </div>
        </div>

        <div class="form-group">
          <div class="col-sm-offset-2 col-sm-10">
            <button @click="invoke" class="btn btn-primary">发送请求</button>
          </div>
        </div>

      </form>
    </div>
        <div class="form-group" v-show="result">
          <label class="col-sm-2 control-label">结果</label>
          <div class="col-sm-6">
            <pre><code>{{result}} </code></pre>
          </div>
        </div>
  </div>
  <hr/>
  MEMO:主要是利用泛化直接调用Dipper服务
</div>

<script src="node_modules/lodash/lodash.min.js"></script>
<script src="node_modules/vue/dist/vue.min.js"></script>
<script src="node_modules/vue-resource/dist/vue-resource.min.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      registryAddress: '192.168.137.5:2181',
      registryGroup: 'yummy',
      referenceInterface: 'com.pactera.dipper.core.IDipperHandler',
      referenceGroup: 'SI_ORD0025',
      methodName: 'handle',
      param1: '',
      params: [
        {type: 'java.lang.Object', value: ''}
      ],
      result: ''
    },
    methods: {
      invoke: function () {
        var vm = this;

        var request = {
          registryAddress: this.registryAddress,
          registryGroup: this.registryGroup,
          referenceInterface: this.referenceInterface,
          methodName: this.methodName,
          referenceGroup: this.referenceGroup,
          params: _.filter(this.params, function (o) {
            return !!o.type;
          })
        };

        console.log('params: ', request.params);

        this.$http.post('/invoke', request)
            .then(function (response) {
              try {
                vm.result = JSON.stringify(JSON.parse(response.body), null, 2);
              } catch (err) {
                vm.result = response.body;
              }
            }, function (response) {
              vm.result = JSON.stringify(JSON.parse(response.body), null, 2);
            });
      },
      addParam: function () {
        this.params.push({type: '', value: ''});
      },
      removeParam: function (param) {
        this.params.$remove(param);
      }
    }
  })
</script>
</body>
</html>